<template>
  <div>{{ cValue }}</div>
</template>
<script setup lang="ts">
  import { computed, onMounted } from 'vue';
  import { useDictStore } from '@/store/modules/dict';

  const dictStore = useDictStore();
  const props = defineProps({
    code: {
      type: String,
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    value: {
      // 值
      type: [String, Number, Array],
    },
    split: {
      // 分割符
      type: String,
      default: ',',
    },
    join: {
      // 连接符
      type: String,
      default: ',',
    },
  });
  const cValue = computed(() => {
    if (!props.value && props.value !== 0) {
      return '';
    }
    const arr: Array<any> = [];
    if (Array.isArray(props.value)) {
      arr.push(...props.value);
    } else {
      arr.push(...props.value.toString().split(props.split));
    }
    const dictData = dictStore.getDictData(props.code as string);
    const res: Array<any> = [];
    arr.forEach((item) => {
      for (let i = 0; i < dictData.length; i++) {
        if (dictData[i].value == item) {
          res.push(dictData[i].label);
          break;
        }
        if (i == dictData.length - 1) {
          res.push(item);
        }
      }
    });

    return res.join(props.join);
  });
  onMounted(() => {
    dictStore.requestData(props.code as string);
  });
</script>
<style lang="less" scoped></style>
